<template>
  <div class="form-item">
    <el-form-item :prop="prop" :rules="rules" class="flexAuto">
      <template #label v-if="label || $slots.label">
        <slot name="label" v-if="$slots.label" />
        <span v-else>{{ label }}</span>
        <template v-if="hint">
          <el-tooltip effect="dark" :content="hint" :placement="placement" :disabled="!hint">
            <el-icon>
              <Warning />
            </el-icon>
          </el-tooltip>
        </template>
      </template>
      <slot />
    </el-form-item>
    <div class="flex-start-center list-r-6" v-if="$slots.btn">
      <slot name="btn" />
    </div>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    label?: string;
    prop?: string;
    hint?: string;
    placement?: string;
    isRules?: boolean; //是否验证
    rules?: any;
    isFlex?: boolean; //是否flex
    rulesType?: string; //验证类型 phone 手机
    value?: any; //
    options?: any; //
  }>(),
  {
    placement: 'top',
    // rules: [[{ required: true, message: '必填', trigger: ['change', 'blur'] }]],
  },
);
const rulesType: any = {
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
  ]
}
const rules = computed(() => {
  let _rules: any = [
    { required: true, message: `${props.label}必填`, trigger: 'change' },
  ]
  if (props.isRules) {
    if (props.rules) {
      return _rules.concat(props.rules)
    } else if (props.rulesType) {
      return _rules.concat(rulesType[props.rulesType] || [])
    } else {
      return _rules
    }
  } else {
    return []
  }
})
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'copyBtn'): void;
  (event: 'delBtn'): void;
}>();
const copyBtn = () => {
  emit('copyBtn');
};
const delBtn = () => {
  emit('delBtn');
};
</script>
<style scoped lang="scss">
.form-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  &:not(:last-child) {
    margin-bottom: 16px;
  }

  >* {
    margin-bottom: 0 !important;

    &:not(:last-child) {
      margin-right: 8px;
    }
  }
}
</style>
